<template>
    <div>
        <h1 style="font-size: 14px; margin: 0 0 8px 0; color: #333; font-weight: bold">
            注：上传的图片需要在设置中，去掉图片的高度，宽度设置为100%；
        </h1>
        <editor v-model="myValue" :init="initOptions" :id="tinymceId" @vue:updated="onUpdate"></editor>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref, watch, watchEffect } from 'vue'
// import { uploadFile } from '@/apis/system/upload'

//在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce'
import 'tinymce/skins/content/default/content.css'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入

//在TinyMce.vue中接着引入相关插件
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/code' // 源码
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/preview' //预览
// import 'tinymce/plugins/paste'; //粘贴插件
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/link'
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autoresize'
import '/public/resource/tinymce/plugins/axupimgs/plugin.js'
import { uploadPublicByBase64, uploadPublicByFile } from '@/apis/upload'

const myValue = ref('')
const props = defineProps(['content'])
const emits = defineEmits(['update'])

const onUpdate = (res: any) => {
    emits('update', res.props.modelValue)
}
watchEffect(() => {
    myValue.value = props.content
})

const plugins =
    ' wordcount table searchreplace preview pagebreak  fullscreen  codesample  autosave autolink anchor  autolink image  lists  link code   image axupimgs '
//media
const toolbar =
    'image preview | fullscreen | fontsize fontfamily | code forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent  lineheight | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat'

const url = import.meta.env.VITE_HOST
//用于接收外部传递进来的富文本
const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))

const example_image_upload_handler = (blobInfo: any, progress: any) =>
    new Promise((resolve, reject) => {
        // let formData = new FormData()
        // formData.append('file', blobInfo.blob(), blobInfo.filename())
        // formData.append('showPub', 'true')
        console.log(blobInfo)
        // 调用上传接口
        uploadPublicByFile(blobInfo.blob()).then((res: any) => {
            if (Number(res.data.code) === 200) {
                console.log('res.data.result.url', res.data.result.url)
                resolve(res.data.result.url)
            }
        })
        // uploadPublicByBase64(blobInfo.base64()).then(res => {
        //     if (Number(res.data.code) === 200) {
        //         console.log('res.data.result.url', res.data.result.url)
        //         resolve(res.data.result.url)
        //     }
        // })
    })

//定义一个对象 init初始化
const initOptions = reactive({
    selector: '#' + tinymceId.value, //富文本编辑器的id,
    language_url: '/resource/tinymce/langs/zh-Hans.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
    language: 'zh-Hans', //语言
    auto_focus: false,
    skin_url: '/resource/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
    width: '100%',
    height: 720, //编辑器高度
    branding: false, //是否禁用“Powered by TinyMCE”
    menubar: true, //顶部菜单栏显示
    image_dimensions: true, //去除宽高属性
    image_caption: true,
    image_advtab: true,
    plugins: plugins, //这里的数据是在props里面就定义好了的
    toolbar: toolbar, //这里的数据是在props里面就定义好了的
    font_family_formats:
        'Arial=arial,helvetica,sans-serif; 微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体
    font_size_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
    paste_webkit_styles: 'all',
    line_height_formats: '1 1.5 2 2.5 3 3.5 4 4.5 5',
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,
    file_picker_types: 'file image media',
    // images_upload_url: url + '/api/system/file/upload',
    promotion: false,
    content_css: '/resource/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
    content_style: `
          *                         { padding:0; margin:0; }
          html, body                { height:100%; }
          img                       { max-width:100%; display:block;height:auto; }
          a                         { text-decoration: none; }
          iframe                    { width: 100%; }
          p                         { line-height:1.6; margin: 0px; }
          table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
          .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
          ul,ol                     { list-style-position:inside; }
        `,
    //视频文件上传
    // file_picker_callback: (callback: any, value: any, meta: any) => {
    //     console.log(callback, value, meta)
    // },
    images_upload_handler: example_image_upload_handler
})

//在onMounted中初始化编辑器
onMounted(() => {
    tinymce.init({})
})
onUnmounted(() => {
    tinymce.remove()
})
</script>
